<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <input type="text" />
    <button>sesssionStorage存储</button>
    <button>sesssionStorage获取</button>
    <button>sesssionStorage更新</button>
    <button>sesssionStorage删除</button>
    <button>sesssionStorage清除</button>
    <script>

        //在h5中提供两种web存储方式

        // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
        // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上

        var txt = document.querySelector('input');

        var btns = document.querySelectorAll('button');
        //        sessionStorage存储数据
        btns[0].onclick = function () {
            window.sessionStorage.setItem('userName', txt.value);
            window.sessionStorage.setItem('pwd', '123456');
            window.sessionStorage.setItem('age', 18);
            console.log("创建");
        }

        //        sessionStorage获取数据
        btns[1].onclick = function () {
            txt.value = window.sessionStorage.getItem('userName');
        }

        //        sessionStorage更新数据
        btns[2].onclick = function () {
            window.sessionStorage.setItem('userName', txt.value);
        }

        //        sessionStorage删除数据
        btns[3].onclick = function () {
            window.sessionStorage.removeItem('userName');
        }

        //        sessionStorage清空数据
        btns[4].onclick = function () {
            window.sessionStorage.clear();


        }

        window.addEventListener('online', function () {
            alert('网络连接建立！');
        });

        window.addEventListener('offline', function () {
            alert('网络连接断开！');
        })
    </script>
</body>

</html>